<template>
    <div class="container">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label- width="100px" class="demo-ruleForm">
            <el-form-item label="openid">
                <el-input v-model="ruleForm.openid"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="username">
                <el-input v-model="ruleForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="ruleForm.password"></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="nickName">
                <el-input v-model="ruleForm.nickName"></el-input>
            </el-form-item>
            <el-form-item label="角色" prop="role" class="role">
                <el-radio-group v-model="ruleForm.role">
                    <el-radio label="普通管理员"></el-radio>
                    <el-radio label="超级管理员"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">保 存</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    data() {
        return {
            ruleForm: {
                openid: '',
                username: '',
                password: '',
                nickName: '',
                role: ''
            },
            rules: {
                openid: [{
                    required: true,
                    message: '请输入openid',
                    trigger: 'blur'
                },],
                username: [{
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur'
                },
                {
                    min: 3,
                    max: 10,
                    message: '长度在 3 到 10 个字符', trigger: 'blur'
                }],
                password: [{
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur'
                },
                {
                    validator: this.pwdRule,
                    trigger: 'blur'
                }],
                nickName: [{
                    required: true,
                    message: '请输入昵称',
                    trigger: 'blur'
                },],
                role: [{
                    required: true,
                    message: '请选择角色',
                    trigger: 'change'
                }]
            }
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.$http.post('/saveAdmin', this.ruleForm).then(res => {
                        if (res.data === 'success') {
                            this.$message.success('保存成功')
                            this.$router.push({
                                name: 'Admin'
                            })
                        } else {
                            this.$message.error('服务器失败')
                        }
                    }).catch(err => {
                        this.$message.error('服务器失败')
                    })
                } else {
                    this.$message.error('请按照红色文字提示进行填写')
                    return false;
                }
            });
        },
        pwdRule(rule, value, callback) {
            const re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/
            if (!re.test(value)) {
                callback('最少八个字符，至少一个大写字母，一个小写字母和一个数字')
            } else {
                callback()
            }
        },
        cancel(){
            this/this.$router.push({
                name:'Admin'
            })
        }
    },
    created() {
        const { action, info } = this.$route.params
        this.action = action
        if (action === 'edit') { this.ruleForm = info }
    },
} 
</script>
<style lang="scss" scoped>
.container {
    background-color: #fff;
    padding: 10px;

    .el-form {
        margin-top: 20px;
        width: 50%;

        .role {
            text-align: left;
        }
    }
}
</style>